<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Edit</span></span>
        <span>Incell editing provides a quick and user friendly way to manipulate data.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-table [value]="cars">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <tr>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.vin">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.vin}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.brand">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.brand}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.color">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.color}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tableeditdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableEditDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tableeditdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tableeditdemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-table [value]="cars"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData&gt;
        &lt;tr&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input type="text" [(ngModel)]="rowData.vin"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        {{rowData.vin}}
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input type="text" [(ngModel)]="rowData.year" required&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        {{rowData.year}}
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input type="text" [(ngModel)]="rowData.brand"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        {{rowData.brand}}
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
            &lt;td pEditableColumn&gt;
                &lt;p-cellEditor&gt;
                    &lt;ng-template pTemplate="input"&gt;
                        &lt;input type="text" [(ngModel)]="rowData.color"&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate="output"&gt;
                        {{rowData.color}}
                    &lt;/ng-template&gt;
                &lt;/p-cellEditor&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>